<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试问题 - SimpleHire</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #2563eb;
            --success-color: #059669;
            --warning-color: #d97706;
            --danger-color: #dc2626;
        }
        
        body {
            background-color: #f8fafc;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .navbar {
            background: white !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .main-container {
            padding: 2rem 0;
            min-height: calc(100vh - 76px);
        }
        
        .questions-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: none;
            overflow: hidden;
        }
        
        .card-header {
            background: linear-gradient(135deg, var(--primary-color), #1d4ed8);
            color: white;
            padding: 2rem;
            border: none;
        }
        
        .card-body {
            padding: 2.5rem;
        }
        
        .question-item {
            background: #f8fafc;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border-left: 5px solid var(--primary-color);
        }
        
        .question-number {
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 1rem;
        }
        
        .answer-textarea {
            border-radius: 10px;
            border: 2px solid #e5e7eb;
            padding: 1rem;
            min-height: 120px;
            resize: vertical;
            transition: all 0.3s ease;
        }
        
        .answer-textarea:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
        }
        
        .btn-submit {
            background: var(--success-color);
            border: none;
            border-radius: 10px;
            padding: 1rem 3rem;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }
        
        .btn-submit:hover {
            background: #047857;
            transform: translateY(-2px);
        }
        
        .progress-bar {
            height: 8px;
            border-radius: 10px;
        }
        
        .resume-info {
            background: #f0f9ff;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border: 1px solid #e0f2fe;
        }
        
        .loading-spinner {
            display: none;
        }
        
        .btn-submit:disabled .loading-spinner {
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-robot me-2"></i>SimpleHire
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/interview">
                            <i class="bi bi-chat-dots me-1"></i>面试
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/interview/history">
                            <i class="bi bi-clock-history me-1"></i>历史记录
                        </a>
                    </li>
                </ul>
                
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span sec:authentication="name">用户</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/interview/history">
                                <i class="bi bi-clock-history me-2"></i>面试历史
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">
                                <i class="bi bi-box-arrow-right me-2"></i>退出登录
                            </a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container main-container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card questions-card">
                    <div class="card-header text-center">
                        <h2 class="mb-0">
                            <i class="bi bi-question-circle me-3"></i>AI面试问题
                        </h2>
                        <p class="mb-0 mt-2 opacity-75">请仔细阅读问题并提供详细的回答</p>
                    </div>
                    
                    <div class="card-body">
                        <!-- Resume Info -->
                        <div class="resume-info" th:if="${result.resumeText}">
                            <h6 class="mb-2">
                                <i class="bi bi-file-text me-2"></i>简历摘要
                            </h6>
                            <p class="mb-0 text-muted" th:text="${#strings.abbreviate(result.resumeText, 200)}">简历内容摘要...</p>
                        </div>
                        
                        <!-- Questions Form -->
                        <form th:action="@{'/interview/submit/' + ${result.id}}" method="post" id="answersForm">
                            <div class="questions-container">
                                <div class="question-item" th:each="question, iterStat : ${questions}">
                                    <div class="d-flex align-items-start mb-3">
                                        <span class="question-number" th:text="${iterStat.index + 1}">1</span>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-2 fw-bold">问题 <span th:text="${iterStat.index + 1}">1</span></h6>
                                            <p class="mb-3 text-dark" th:text="${question}">面试问题内容</p>
                                            <textarea class="form-control answer-textarea" 
                                                    th:name="|answer_${iterStat.index}|"
                                                    th:placeholder="|请回答问题 ${iterStat.index + 1}...|"
                                                    required></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Hidden field to combine all answers -->
                            <input type="hidden" name="answers" id="combinedAnswers">
                            
                            <div class="text-center mt-4">
                                <button type="submit" class="btn btn-success btn-submit" id="submitBtn">
                                    <span class="loading-spinner spinner-border spinner-border-sm me-2" role="status"></span>
                                    <i class="bi bi-check-circle me-2"></i>提交答案
                                </button>
                            </div>
                        </form>
                        
                        <!-- Tips -->
                        <div class="mt-4 p-3 bg-light rounded">
                            <h6 class="mb-2">
                                <i class="bi bi-lightbulb me-2"></i>答题建议
                            </h6>
                            <ul class="mb-0 small text-muted">
                                <li>请提供具体的例子和数据来支持你的回答</li>
                                <li>回答要结构清晰，逻辑性强</li>
                                <li>展示你的思考过程和解决问题的能力</li>
                                <li>诚实回答，不要夸大或虚构经历</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('answersForm');
            const submitBtn = document.getElementById('submitBtn');
            const combinedAnswersInput = document.getElementById('combinedAnswers');
            
            // Form submission handler
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Collect all answers
                const answerTextareas = form.querySelectorAll('.answer-textarea');
                const answers = [];
                
                let allAnswered = true;
                answerTextareas.forEach((textarea, index) => {
                    const answer = textarea.value.trim();
                    if (!answer) {
                        allAnswered = false;
                        textarea.focus();
                        return;
                    }
                    answers.push(`问题${index + 1}答案：${answer}`);
                });
                
                if (!allAnswered) {
                    alert('请回答所有问题后再提交。');
                    return;
                }
                
                // Combine answers
                combinedAnswersInput.value = answers.join('\n\n');
                
                // Show loading state
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>正在提交...';
                
                // Submit form
                form.submit();
            });
            
            // Auto-resize textareas
            document.querySelectorAll('.answer-textarea').forEach(textarea => {
                textarea.addEventListener('input', function() {
                    this.style.height = 'auto';
                    this.style.height = Math.max(120, this.scrollHeight) + 'px';
                });
            });
        });
    </script>
</body>
</html>